<template>
    <div class="orderlist">
        <div class="search">
            <el-input placeholder="请输入要查询的关键词" @keyup.enter.native="search(keywords)" v-model="keywords"
                class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="search(keywords)"></el-button>
            </el-input>
        </div>
        <template v-if="data.count == 0">
            <div class="null ani1">
                <div class="icon">
                    <img src="../assets/null.png" alt="">
                </div>
                <p>暂未添加方案</p>
            </div>
        </template>
        <template v-else>
            <div class="list_container">
                <ul class="list">
                    <li class="item head">
                        <span class="id">ID</span>
                        <span class="ordername">订单名称</span>
                        <span class="username">客户姓名</span>
                        <span class="address">客户地址</span>
                        <span class="ordername">方案价格</span>
                        <span class="date">修改时间</span>
                        <span class="action">操作</span>
                    </li>
                    <li class="item" v-for="(item, index) in data.data" :key="index" :class="`ani${index + 1}`">
                        <span class="id">{{ item.id }}</span>
                        <span class="ordername">{{ item.ordername }}</span>
                        <span class="username">{{ item.kehuchenghu }}</span>
                        <span class="address">{{ item.kehudizhi }}</span>
                        <span class="ordername">
                            <el-popover placement="right" width="380" trigger="click">
                                <table class="pop_table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>方案名称</th>
                                            <th>销售价格</th>
                                            <th>结算价格</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>方案1</td>
                                            <td>￥{{ $init.numberFormat(item.fangantotal1, 0, ',') }}</td>
                                            <td>￥{{ $init.numberFormat(item.fangantotal2_1, 0, ',') }}</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>方案2</td>
                                            <td>￥{{ $init.numberFormat(item.fangantotal2, 0, ',') }}</td>
                                            <td>￥{{ $init.numberFormat(item.fangantotal2_2, 0, ',') }}</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>方案3</td>
                                            <td>￥{{ $init.numberFormat(item.fangantotal3, 0, ',') }}</td>
                                            <td>￥{{ $init.numberFormat(item.fangantotal2_3, 0, ',') }}</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>方案4</td>
                                            <td>￥{{ $init.numberFormat(item.fangantotal4, 0, ',') }}</td>
                                            <td>￥{{ $init.numberFormat(item.fangantotal2_4, 0, ',') }}</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>方案5</td>
                                            <td>￥{{ $init.numberFormat(item.fangantotal5, 0, ',') }}</td>
                                            <td>￥{{ $init.numberFormat(item.fangantotal2_5, 0, ',') }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div slot="reference">点击查看</div>
                            </el-popover>
                        </span>
                        <span class="date">{{ time(item.lastmodifytime) }}</span>
                        <el-button-group>
                            <el-button size="mini" icon="el-icon-view" @click="path('detail/', item.id)"></el-button>
                            <el-popconfirm title="这是一段内容确定删除吗？" @onCancel="() => { }" @confirm="del(item.id)">
                                <el-button slot="reference" size="mini"><i class="el-icon-delete"></i></el-button>
                            </el-popconfirm>
                        </el-button-group>
                    </li>
                </ul>
            </div>

        </template>
    </div>
</template>
<script>
export default {
    name: 'Home',
    data() {
        return {
            data: '',
            token: '',
            keywords: '',
            loading: false,
        }
    },
    mounted() {
        let token = this.$storage.localGet('userinfo');
        if (token.logincode !== undefined) {
            this.token = token;
            this.getorderlist(token.logincode, '');
        } else {
            this.$router.push('/login');
        }
    },
    methods: {
        path(url, id) {
            this.$router.push(url + id);
        },
        search(val) {
            this.getorderlist(this.token.logincode, val);
        },
        getorderlist(token, keywords) {
            let vm = this;
            vm.loading = true;
            vm.$api.init.getorderlist(token, keywords).then(res => {
                let data = res.data;
                if (data.code == 0) {
                    this.data = data;
                    vm.loading = false;
                } else if (data.code == 1111) {
                    vm.logout();
                }
                else {
                    vm.$message.error(data.msg);
                }
            })
        },
        logout() {
            let vm = this,
                arr = {
                    password: '',
                    username: '',
                    checked: ''
                };
            vm.$router.push('/login');
            vm.$storage.localSet('userinfo', arr);
        },
        del(id) {
            console.log(id)
            let vm = this;
            vm.$api.init.delOrder(this.token.logincode, id).then(res => {
                let data = res.data;
                if (data.code == 0) {
                    vm.getorderlist(this.token.logincode, '');
                    vm.$notify({
                        message: '订单删除成功',
                        type: 'success'
                    });
                } else {
                    vm.$message.error(data.msg);
                }
            })
        },
        time(timestamp) {
            let Y, M, D, h, m, s;
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            Y = date.getFullYear() + '-';
            M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            D = (date.getDate() + 1 < 10 ? '0' + (date.getDate() + 1) : date.getDate() + 1)
            h = (date.getHours() + 1 < 10 ? '0' + (date.getHours() + 1) : date.getHours() + 1) + ':';
            m = (date.getMinutes() + 1 < 10 ? '0' + (date.getMinutes() + 1) : date.getMinutes() + 1);
            s = date.getSeconds();
            return M + D + ' ' + h + m;
        }
    }
}
</script>
<style lang="less" scoped>
.orderlist {
    .search {
        margin: 10px;
        padding: 5px;
        border-radius: 12px;
        background-color: #F5F7FA;
        box-shadow: 0 1px 0 0 rgba(0 0 0, 0.5);

        /deep/.el-input__inner {
            border: 0;
            background-color: #F5F7FA;
        }

        /deep/.el-input-group__append {
            border: 0;
        }
    }

    .null {
        margin: 10px;
        padding: 50px 15px;
        border-radius: 12px;
        text-align: center;
        background-color: #fff;
        box-shadow: 0 1px 0 0 rgba(0, 0, 0, .5);

        img {
            display: block;
            margin: 0 auto;
        }

        p {
            font-size: 16px;
            color: #888;
        }
    }

    .list_container {
        padding: 15px;
        margin: 0 10px;
        border-radius: 10px;
        background-color: #F8F8F8;
        box-shadow: 0 1px 0 0 rgba(0, 0, 0, .5);
        max-width: 100%;
        overflow: hidden;
        overflow-x: scroll;
    }

    .list {
        width: 1000px;
        // padding: 15px;
        // margin: 0 10px;
        // border-radius: 10px;
        text-align: center;
        // background-color: #F8F8F8;
        // box-shadow: 0 1px 0 0 rgba(0, 0, 0, .5);

        .item {
            display: flex;
            padding: 18px 10px;
            list-style: none;
            color: #666;
            font-size: 14px;
            align-items: center;
            background-color: #fff;
            border-bottom: 1px solid #eee;
            border-radius: 10px;

            &:first-child {
                border-radius: 10px 10px 0 0;
            }

            &:nth-child(2) {
                border-radius: 0 0 10px 10px;
            }

            span {
                padding: 5px;
                display: block;
                flex-shrink: 0;
            }

            .id {
                width: 60px;
            }

            .address,
            .ordername {
                width: 150px;
                cursor: pointer;
            }

            .size,
            .username {
                width: 100px;
            }

            .date {
                width: 170px;
            }

            .el-button-group {
                flex-shrink: 0;
                margin-left: auto;
                margin-right: 15px;
                text-align: right;

                span {
                    padding: 0;
                    display: inline-block;

                    .el-button {
                        border-radius: 0 4px 4px 0;
                    }
                }
            }
        }

        .head {
            height: 35px;
            font-size: 12px;
            border-radius: 10px 10px 0 0;
            background-color: #eee;

            span {
                color: #555;
                font-weight: 700;
            }

            .action {
                flex: 1;
                text-align: center;
            }
        }
    }

    .loop(@n, @i: 1) when (@i =< @n) {
        .ani@{i} {
            transition: all 0.3s linear;
            animation-name: toLeft; // toBottom
            animation-duration: 1s; // 注释掉 会没有动画 就是帕帕一帧一帧的出来
            animation-fill-mode: both;
            animation-delay: (@i * 100 + 100ms);
        }

        .loop(@n, (@i + 1));
    }

    .loop(11);

    @keyframes toLeft {
        0% {
            opacity: 0;
            transform: translate3d(-30px, 0, 0);
        }

        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}
</style>
<style lang="less">
.el-popconfirm__main {
    padding: 5px 0
}

.pop_table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px;

    tr>td,
    tr>th {
        padding: 5px;
        text-align: center;
        background-color: #c7d3e6;
        border: 1px solid #333;
    }

    tr>td {
        color: #333;
        background-color: #fff;
    }

    tr:hover {
        td {
            background-color: rgba(0, 0, 0, .1);
        }
    }
}</style>